<!-- Copyright (c) Microsoft Corporation and contributors. All rights reserved. -->
<!-- Licensed under the MIT License. -->

<!doctype html>
<html lang="en" style="height: 100%">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Test application</title>
		<style>
			.reaction {
				position: absolute;
				font-size: x-large;
				animation: fadeUp 1s forwards;
			}

			@keyframes fadeUp {
				0% {
						opacity: 1;
						transform: translateY(0) rotate(45deg);
				}
				100% {
						opacity: 0;
						transform: translateY(-50px) rotate(-45deg);
				}
		}

		emoji-picker {
			--num-columns: 6;
			height: 200px;
			width: 300px;
		}

		#cover {
			position: absolute;
			background-color: black;
			height: 100%;
			width: 100%;
		}
		</style>
	</head>
	<body style="margin: 0; height: 100%">
	<div id="cover" style="opacity: 0">
	</div>
		<div id="control-panel" style="padding: 10px"></div>
		<div id="focus-content" style="min-height: 100%; border: 1px solid black"></div>
		<div id="mouse-position"></div>
	</body>
</html>
